<?php
// 初始化泡泡龙游戏棋盘数据
$boardWidth = 8;
$boardHeight = 10;
$bubbleColors = ['red', 'blue', 'green', 'yellow', 'purple'];
$board = [];

// 初始化棋盘，随机填充泡泡
for ($i = 0; $i < $boardHeight; $i++) {
    $row = [];
    for ($j = 0; $j < $boardWidth; $j++) {
        $randomColor = $bubbleColors[array_rand($bubbleColors)];
        $row[] = $randomColor;
    }
    $board[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泡泡龙游戏</title>
    <style>
        body {
            text-align: center;
        }

        #game-board {
            display: grid;
            grid-template-columns: repeat(<?php echo $boardWidth;?>, 50px);
            grid-template-rows: repeat(<?php echo $boardHeight;?>, 50px);
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }

      .bubble {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

       .red {
            background-color: red;
        }

       .blue {
            background-color: blue;
        }

       .green {
            background-color: green;
        }

       .yellow {
            background-color: yellow;
        }

       .purple {
            background-color: purple;
        }
    </style>
</head>

<body>
    <h1>泡泡龙游戏</h1>
    <div id="game-board">
        <?php
        foreach ($board as $i => $row) {
            foreach ($row as $j => $color) {
                echo '<div class="bubble '. $color. '" data-row="'. $i. '" data-col="'. $j. '"></div>';
            }
        }
        ?>
    </div>
    <button id="shoot-button">发射泡泡</button>
    <p id="message"></p>

    <script>
        const board = document.getElementById('game-board');
        const shootButton = document.getElementById('shoot-button');
        const message = document.getElementById('message');
        const bubbleColors = <?php echo json_encode($bubbleColors);?>;

        // 随机生成一个待发射的泡泡颜色
        function getRandomBubbleColor() {
            return bubbleColors[Math.floor(Math.random() * bubbleColors.length)];
        }

        let currentBubbleColor = getRandomBubbleColor();

        shootButton.addEventListener('click', function () {
            // 简单模拟泡泡发射到顶部中间位置（后续可优化发射逻辑）
            const targetCol = Math.floor(<?php echo $boardWidth;?> / 2);
            const targetRow = 0;
            const targetCell = board.querySelector(`.bubble[data-row="${targetRow}"][data-col="${targetCol}"]`);

            if (targetCell) {
                targetCell.classList.remove(...targetCell.classList);
                targetCell.classList.add('bubble', currentBubbleColor);
                targetCell.dataset.color = currentBubbleColor;

                // 检查并消除相连的同色泡泡
                checkAndRemoveConnectedBubbles(targetRow, targetCol);

                // 生成新的待发射泡泡
                currentBubbleColor = getRandomBubbleColor();
            }
        });

        function checkAndRemoveConnectedBubbles(row, col) {
            const targetColor = board.querySelector(`.bubble[data-row="${row}"][data-col="${col}"]`).dataset.color;
            const connectedBubbles = [];
            const visited = {};

            function dfs(r, c) {
                if (r < 0 || r >= <?php echo $boardHeight;?> || c < 0 || c >= <?php echo $boardWidth;?>) return;
                const key = `${r}-${c}`;
                if (visited[key]) return;
                const bubble = board.querySelector(`.bubble[data-row="${r}"][data-col="${c}"]`);
                if (!bubble || bubble.dataset.color!== targetColor) return;

                visited[key] = true;
                connectedBubbles.push(bubble);

                dfs(r - 1, c); // 上
                dfs(r + 1, c); // 下
                dfs(r, c - 1); // 左
                dfs(r, c + 1); // 右
            }

            dfs(row, col);

            if (connectedBubbles.length >= 3) {
                connectedBubbles.forEach(bubble => {
                    bubble.classList.remove(...bubble.classList);
                    bubble.classList.add('bubble');
                    delete bubble.dataset.color;
                });
                message.textContent = `消除了 ${connectedBubbles.length} 个泡泡！`;
            } else {
                message.textContent = '未达到消除条件';
            }
        }
    </script>
</body>

</html>